<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>外协周期表</title>
</head>

<body>
  <div id="app">
    <div class="prod-cycle" v-loading="loading">
      <el-container style="height:100%;">
        <el-aside class="prodCycle-form-content" width="30%">
          <div class="form-title">
            外协周期表
          </div>
          <prod-cycle-form :prod-cycle.sync="prodCycle" :suppliers.sync="suppliers" type="update" @add-cycle="openAddProCycleForm"
            @save-success="updateProCycleSuccess"></prod-cycle-form>
        </el-aside>
        <el-main class="prodCycle-table-div">
          <div>
            <el-form :model="search" label-width="50px" :inline="true">
              <el-form-item label="状态">
                <el-select v-model="search.status" @change="searchProCycle">
                  <el-option v-for="state in statusList" :key="`state_${state.value}`" :value="state.value" :label="state.label"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="proCycle-table-content">
            <el-table fit stripe border class="proCycle-table" :data="prodCycleList" style="width: 100%" @row-click="toUpdateProCycle"
              height="parent" ref="proCycleTable">
              <el-table-column :resizable="false" prop="supplierName" label="供应商名称" min-width="120px"></el-table-column>
              <el-table-column :resizable="false" prop="technology" label="加工工艺" min-width="100px"></el-table-column>
              <el-table-column :resizable="false" prop="flowCycle" label="流程周期" min-width="70px"></el-table-column>
              <el-table-column :resizable="false" prop="unitPrice" label="单价" min-width="70px"></el-table-column>
            </el-table>
          </div>
          <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:5px;">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
              @current-change="pageChange"></el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>

    <el-dialog fullscreen title="添加外协周期" :visible.sync="addProdCycleFormDialog" :show-close="true">
      <div v-if="addProdCycleFormDialog" style="width:100%;max-width:700px;margin:auto;margin-top:30px;overflow:auto;">
        <prod-cycle-form :suppliers.sync="suppliers" type="create" @save-success="addProCycleSuccess"></prod-cycle-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "../supplier/css/supplierForm.css",
    "./css/prodCycleForm.css"
  ], [
    "/vueSystem/js/checkVaildUtil.js"
  ]);
</script>
<script src="../supplier/supplierForm.js"></script>
<script src="./prodCycleForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        addProdCycleFormDialog: false,
        suppliers: [],
        prodCycleList: [],
        search: {
          status: 1
        },
        statusList: [{
          value: '',
          label: '全部'
        }, {
          value: 1,
          label: '使用'
        }, {
          value: 2,
          label: '禁用'
        }],
        prodCycle: {},
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.getSuppliers();
      this.setProdCycleList();
    },
    methods: {
      getSuppliers: function () {
        this.loading = true;
        var self = this;
        return SysUtil.getSupplierDropDown().then(function (supplierList) {
          self.loading = false;
          self.suppliers = supplierList;
        }).catch(function () {
          self.loading = false;
        });
      },

      setProdCycleList: function () {
        var pagination = this.pagination;
        var search = this.search;

        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        var status = search.status;
        if (status !== '') {
          postData.status = status;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/getPutoutFlowCycle', postData).then(function (res) {
          var prodCycleList = res.returnData;
          self.prodCycleList = prodCycleList;

          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchProCycle: function () {
        this.setProdCycleList();
      },

      pageChange: function () {
        this.setProdCycleList();
      },

      toUpdateProCycle: function (selectProCycle) {
        selectProCycle = _.cloneDeep(selectProCycle);
        this.prodCycle = selectProCycle;
      },

      openAddProCycleForm: function () {
        this.addProdCycleFormDialog = true;
      },

      addProCycleSuccess: function () {
        this.addProdCycleFormDialog = false;
        this.pagination.currentPage = 1;
        this.setProdCycleList();
      },

      updateProCycleSuccess: function () {
        this.setProdCycleList();
      }
    },
    components: {
      ProdCycleForm: ProdCycleForm
    }
  });
</script>
<style>
  .prod-cycle {
    width: 100%;
    height: 100%;
    min-width: 400px;
  }

  .prod-cycle .prodCycle-form-content,
  .prod-cycle .prodCycle-table-div {
    overflow: auto;
    min-width: 300px;
  }

  .prod-cycle .prodCycle-table-div {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
  }

  .prod-cycle .prodCycle-table-div .el-form-item {
    margin-bottom: 10px;
  }

  .prod-cycle .prodCycle-table-div .proCycle-table-content {
    flex: 1;
    overflow: auto;
  }

  .prod-cycle .prodCycle-form-content {
    border-right: 1px solid #cccccc;
    padding: 5px;
    padding-right: 0;
  }

  .prod-cycle .prodCycle-form-content .form-title {
    font-size: 20px;
    height: 50px;
    line-height: 40px;
    padding-left: 20px;
  }
</style>

</html>